import IndexRouter from "./router/IndexRouter"
import './App.css'
import './orientalCherry.js'

function App() {
  function animated(element, targetObject, callback, speed) {//element 变化的元素  传入目标对象 targetObject callback 回调函数
    clearInterval(element.timer)
    speed = typeof speed == 'number' ? speed : 0
    //遍历目标对象 查看里面需要变化的内容 {"width":100,"height":100,opacity":1,"zIndex":1}
    element.timer = setInterval(() => {
      let flag = true
      for (let key in targetObject) {
        let current = parseFloat(getStyle(element, key))
        let step = 0
        let setValue
        //判断传进来的值
        if (key == "opacity") {//如果是opacity是使用下面这个
          //不需要px作为单位
          //目标元素 targetObject[key]  当前的值 Number(getStyle(element,key)) 步长 
          step = (parseFloat(targetObject[key]) * 100 - current * 100) / 10//保证最终达到目标位置
        }
        if (key != "opacity" && key != "zIndex") { //height width left top
          step = (targetObject[key] - current) / 10
        }
        step = step > 0 ? Math.ceil(step) : Math.floor(step)
        if (key == "opacity") {
          setValue = (current * 100 + step) / 100
        } else {
          setValue = current + step + 'px'
        }
        element.style[key] = setValue
        if (key == "zIndex") {//如果是层高 直接设置 
          element.style[key] = targetObject[key]
        }
        if (parseFloat(getStyle(element, key)) != targetObject[key]) {//如果某个没有设置完
          flag = false
        }
      }
      if (flag) {
        clearInterval(element.timer)
        typeof callback == 'function' ? callback() : console.log("");
      }
    }, speed)
    //callback是所有的这个函数里面所有的事情做完以后做的事情
  }
  //获取样式的值
  function getStyle(element, attr) { //需要获取样式的对象  样式的名字
    // window.getComputedStyle(element,null)[attr]
    // element.currentStyle ie的兼容写法
    //获取样式对象
    var style = window.getComputedStyle ? window.getComputedStyle(element, null) : element.currentStyle
    return style[attr]
  }
  // 封装一个方法 用于获取滚动栏离顶部的距离和离最左距离
  function myScoll() {
    //如果没有滚动栏
    if (window.pageYOffset != null) {
      return { "left": window.pageXOffset, "top": window.pageYOffset }
    }
    //获取top值
    let top = document.body.scrollTop ? document.body.scrollTop : document.documentElement.scrollTop
    //获取left值
    let left = document.body.scrollLeft ? document.body.scrollLeft : document.documentElement.scrollLeft
    //再返回
    return { left, top }
  };
  document.onclick = function (e) {
    e = e || window.event
    let mouseX = e.clientX
    let mouseY = e.clientY
    //在底部生成一个div 颜色随机的 x轴 鼠标点击的x轴 y轴为屏幕高度
    let box = createdDiv()
    box.style.top = window.innerHeight + "px" //窗口高度
    box.style.left = mouseX + 'px'
    document.body.appendChild(box)//添加给对应的body
    //控制div从底部到达鼠标点击的y轴位置
    animated(box, { "top": mouseY }, function () {
      //在这个回调里面 原本的div删除 生成更多的div（颜色随机） 位置为鼠标点击的位置 这些div做抛物线运动
      box.remove()
      //随机个数
      let count = randomNumber(10, 15)
      for (let i = 0; i < count; i++) {
        let div = createdDiv()
        // 位置为鼠标点击的位置 
        div.style.top = mouseY + "px"
        div.style.left = mouseX + 'px'
        document.body.appendChild(div)//添加给对应的body
        //定时器控制div的运动
        //记录了四个象限
        // let arr = [{x:randomNumber(-20,-1),y:randomNumber(1,20)},
        // {x:randomNumber(1,20),y:randomNumber(1,20)},
        // {x:randomNumber(-20,-1),y:randomNumber(-20,-1)},
        // {x:randomNumber(1,20),y:randomNumber(-20,-1)}]
        //随机得到一个象限
        // let stepPoint = arr[randomNumber(0,3)]
        // 得到一个随机数来控制x和y 正负
        let x = randomNumber(0, 1) == 0 ? randomNumber(1, 20) : randomNumber(1, 20) * -1
        let y = randomNumber(0, 1) == 0 ? randomNumber(1, 20) : randomNumber(1, 20) * -1
        let stepPoint = { x, y }
        let stepY = stepPoint.y //取出y值
        let timer = setInterval(() => {
          //得到当前位置
          let currentX = parseFloat(div.style.left)
          let currentY = parseFloat(div.style.top)
          stepY++
          div.style.top = currentY + stepY + "px"
          div.style.left = currentX + stepPoint.x + 'px'
          //等div的x轴到达0或者x到达屏幕的宽度 或者 y轴到达0 或者y到达屏幕高度的时候 
          //停止运动 清除div
          if (currentX <= 0 || currentX >= window.innerWidth || currentY <= 0 || currentY >= window.innerHeight) {
            clearInterval(timer)
            div.remove()
          }

        }, 10)
      }
    }, 40)
  }
  // 生成随机颜色
  function randomColor(min, max) {
    let r = randomNumber(min, max)
    let g = randomNumber(min, max)
    let b = randomNumber(min, max)
    return `rgb(${r},${g},${b})`
  }
  //生成区间内容随机数
  function randomNumber(min, max) {
    return Math.round(Math.random() * (max - min)) + min
  }
  //生成div给定对应的颜色和位置
  function createdDiv() {
    let div = document.createElement('div')
    div.className = 'box'
    div.style.backgroundColor = randomColor(100, 250)
    return div
  }
  return <div>
    <IndexRouter></IndexRouter>
  </div>
}
export default App